<template>
	<div class="allPayDetail">
    <div class="header-wrap" style="background:none;" ref="showBG">
      <span class="header-wrap-left" >
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-right">
        <i class="iconseach iconfont icon-fenxiang"></i>
      </span>
    </div>
		<div class="allPayDetail-swiper">
      <!-- 大轮播 -->
      <maxSwiper :message='maxSwiper'/>
		</div>
      <div class="allPayDetail-exhibition">
        <div class="allPayDetail-tips">
          <span>XX费用</span>
          <span>XX小区小区小区小区</span>
        </div>
        <div class="parcel-content-box">
          <div class='parcel-Importance'>
            <span class="stars">
              <van-rate
                style="width: auto;margin-right:.1rem;"
                readonly
                v-model="list.value"
                :swipe-threshold = '3'
                allow-half
                void-icon="star"
                void-color="#6b5da6"
                color= '#ffa272'
                @change= 'change(index)'
                size= ".3rem"
              />
            </span>
            <span class="star-number">{{list.number}}&nbsp;已读</span>
          </div>
          <span class='parcel-time'>剩余35天4小时</span>
        </div>
      </div>
      <div class="parcel-mode">
        <div class="mode-radio">
          <van-radio-group v-model="radio">
            <van-radio

              v-for="(item,index) in itemData"
              :key="index"
              :name="item.id"
              class="selected"
              :class="{ 'selected-active':currentIndex===item.id?currentIndex===item.id:currentIndex===index}"
            >
            <div class="mode-list" @click="getradio(item.id)">
              <span>¥1000&nbsp;|&nbsp;1年费用</span>
              <span>1年物业管理</span>
              <span>12个月温馨提示</span>
            </div>
            <img
            @click="getradio(item.id)"
              slot="icon"
              slot-scope="props"
              :src="props.checked ? icon.active : icon.inactive"
            >
            </van-radio>
          </van-radio-group>
        </div>
      </div>
        <div class="allPayDetail-describe describe">
          <span>简述</span>
          <span>尊敬的各位业主，现已开始缴纳2019年物业费，请于2019年5月30日前缴纳。</span>
        </div>
        <div class="allPayDetail-describe">
          <span>特别提醒</span>
        </div>
        <div class="allPayDetail-describe interval">
          <span>物业管理费用</span>
          <span>1000元</span>
        </div>
        <div class="allPayDetail-describe interval">
          <span>维修基金</span>
          <span>1000元</span>
        </div>
    <!-- 滑动列表 -->
    <NoticeSwiper :message='Notice'/>
    <!-- 底部 -->
    <div class="submit">
      <span @click="starnumber" v-if="collectionShow"><img src="@/assets/images/collection.png" alt=""></span>
      <span @click="starnumber" v-else><img src="@/assets/images/collection-color.png" alt=""></span>
      <span>缴纳</span>
    </div>
	</div>
</template>
<script>
import api from '../../api/api.js'
import maxSwiper from './components/maxSwiper'
import NoticeSwiper from './components/noticeSwiper'
import { Rate, Radio, RadioGroup } from 'vant';
export default {
  data(){
    return{
      currentIndex:0,
      radio: '1',
      maxSwiper:[],
      list:{
        value: 2.5,
        number: 52
      },
      collectionShow:true,
      Notice : [
        {
          collectionShow: true,
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'哈哈哈',
          time:'2018-5-25',
          value: 2.5,
          number: 15
        },
        {
          collectionShow: false,
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'哈哈哈',
          time:'2018-5-25',
          value: 3,
          number: 25
        },
        {
          collectionShow: true,
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'哈哈哈',
          time:'2018-5-25',
          value: 3.5,
          number: 5
        }
      ],
      itemData:[
        {
          id:'1'
        },
        {
          id:'2'
        },
        {
          id:'3'
        }
      ],
      icon: {
        active: require('../../assets/images/selection.png'),
        inactive: require('../../assets/images/nochoice.png')
      }
    }
  },
  watch:{

  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener("scroll",this.handleScroll)
  },
  methods:{
  handleScroll () {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    if(scrollTop >= 210){
      this.$refs.showBG.style.background = '#352f59'
    }else{
      this.$refs.showBG.style.background = 'none'
    }
  },
  getradio(index){
    this.currentIndex=index;
  },
  starnumber(){
    this.collectionShow= !this.collectionShow
  },
  },

  components: {
    maxSwiper,
    NoticeSwiper,
    [Rate.name]: Rate,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup
  }
}
</script>
<style>
/* .van-radio__icon{
  height: auto;
  line-height: 0rem;
} */

.van-radio__label{
  width: 100%;
  margin-left: .4rem;
}
</style>

<style scoped>
.allPayDetail{
  overflow: hidden;
  background: #2e294e;
}
/* .allPayDetail-content{
  margin: .2rem .5rem;
} */
.allPayDetail-tips{
  font-size: .48rem;
  color: #fff;
}

.allPayDetail-tips span{
  display: block;
  height: .6rem;
}
.allPayDetail-tips span:nth-of-type(1){
  margin-top: .35rem
}
.parcel-Importance{
  margin: .3rem 0 .1rem 0;
  display: flex;
}
.star{
  width: auto;
}
.star-number{
  flex: 1;
  color: #57c5c6;
  font-size: .24rem;
}
.parcel-time{
  color: #0EAD69;
  font-size: .24rem;
}
.parcel-mode{
  display: flex;
  margin-top: .5rem;
  width: 100%;
}
.mode-radio{
  position: relative;
  flex: 1;
}
.radio-img img{
  width: .25rem;
  height: .25rem;
  margin: .05rem 0 0 .06rem;
}
.mode-list{
  color: #fff;
}
.mode-list span{
  width: 100%;
  height: .5rem;
  display:block;
}
.mode-list span:nth-of-type(1){
  height: .6rem;
  font-size: .36rem;
}
.selected{
  margin:.3rem .5rem;
  padding: .2rem .35rem;
  border:1px solid #3B3564;
  border-radius: .2rem;
  height: 1.6rem;
  vertical-align: sub;
}
.selected-active{
  margin:.3rem .5rem;
  padding: .2rem .35rem;
  border:1px solid #3B3564;
  border-radius: .2rem;
  height: 1.6rem;
  vertical-align: sub;
  background: #423b6f!important
}
.allPayDetail-exhibition{
  margin: 0 .5rem;
}
.allPayDetail-describe{
  margin: 0 .5rem;
  font-size: .4rem;
  color: #fff;
}
.describe{
  padding-bottom: 1rem;
}
.interval{
  margin: .2rem .5rem;
  font-size: .32rem;
}
.allPayDetail-describe span{
  display: block;
}
.allPayDetail-describe span:nth-of-type(2){
  font-size: .28rem;
  color: #57c5c6;
}
.submit{
  display: flex;
  width: 100%;
  height: 2.1rem;
  background: #352F59;
}
.submit span:nth-of-type(1){
  margin: .3rem;
  position: relative;
  width: 1.1rem;
  height: 1rem;
  border-radius: 50%;
  background: #423B6F;
}
.submit span:nth-of-type(1) img{
  position: absolute;
  left: calc(50% - .21rem);
  top: calc(50% - .2rem);
  width: .42rem;
  height: .4rem;
}
.submit span:nth-of-type(2){
  margin: .3rem 0;
  height: 1rem;
  line-height: 1rem;
  width: 5.5rem;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .5rem;
}
</style>


